<template>
  <div class="course-preview-container">

    <div class="box" @mouseenter="mouseenter" @mouseleave="mouseleave" @click="goCourse(course)">
      <div class="img-box">
        <img :src="course.courseCover" ref="img">
      </div>

      <!--课程名称-->
      <div class="name" ref="name">
        {{ course.courseName }}
      </div>

      <!--课程简介-->
      <div class="introduction">
        {{ course.courseIntroduction }}
      </div>

      <!--  todo-->
      <div class="info">
        <div v-if="course.courseSource==0" class="my tvc">自研</div>
        <div v-if="course.courseSource==1" class="link tvc">外链</div>
        <div v-if="course.courseSource==2" class="teacher tvc">外聘</div>

        <!--        <div class="count">
                  <div>
                    <IconAli :sty="{width:'20px',height:'20px'}" icon='people'></IconAli>
                  </div>
                  256841654人学过
                </div>-->

        <!--        <div class="score">评分5.0</div>-->
      </div>

    </div>

  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";

export default {
  //组件名称
  name: "CoursePreview",
  props: ["course"],
  //组件注册
  components: {IconAli},
  //数据驱动
  data() {
    return {}
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    mouseenter() {
      let style = this.$refs.img.style;
      style.width = '100%';
      style.height = '100%';
      style.marginTop = '0px';
      style.marginLeft = '0px';
      let nameStyle = this.$refs.name.style;
      nameStyle.color = '#F20A0A';
    },
    mouseleave() {
      let style = this.$refs.img.style;
      style.width = '96%';
      style.height = '96%';
      style.marginTop = '2%';
      style.marginLeft = '2%';
      let nameStyle = this.$refs.name.style;
      nameStyle.color = '#000';
    },
    goCourse(course) {
      let type = course.courseSource;
      if (type == 1) { //说明是外链
        window.open(course.courseCommunityUrl, '_blank');
        return;
      }
      //跳转
      let {href} = this.$router.resolve({
        name: "CourseDetails",
        query: {
          cid: course.courseId
        }
      });
      window.open(href, '_blank');
    }
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.course-preview-container {

  .box {
    background-color: #FFF;
    width: 90%;
    padding: 10px 4% 10px 4%;
    border-radius: 6px;
    margin: 10px auto 10px auto;
    cursor: pointer;
  }

  .img-box {
    width: 100%;
    height: 134px;
  }

  .img-box img {
    display: inline-block;
    width: 96%;
    height: 96%;
    margin-top: 2%;
    margin-left: 2%;
    border-radius: 6px;
  }

  .img-box img:hover {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 6px;
  }

  .name {
    height: 32px;
    font-size: 16px;
    line-height: 32px;
    color: #000;
    font-family: 微软雅黑;
    font-weight: bold;
    margin-top: 8px;
  }

  .name:hover {
    color: #F20A0A;
  }

  .introduction {
    height: 32px;
    margin-top: 8px;
    font-size: 14px;
    color: rgba(135, 135, 135, 1);;
    line-height: 16px;

    /*溢出省略...*/
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .info {
    margin: 16px auto 10px auto;
    display: flex;
    justify-content: space-between;
    height: 20px;

    .my, .teacher, .link {
      width: 32px;
      font-size: 14px;
      color: #FFF;
      border-radius: 2px;
    }

    .my {
      background-color: #f64747;
    }

    .link {
      background-color: #4784ee;
    }

    .teacher {
      background-color: #f520f1;
    }

    .count {
      display: flex;
      line-height: 20px;
    }
  }
}
</style>